import { useState } from 'react'
import { Radio, Space } from 'antd-mobile'
import { SmileOutline, SmileFill } from 'antd-mobile-icons'
interface RadioComponentProps {
    options: string[]
    onSelect?: (value: string | null) => void
    defaultValue?: string | null
}

export function RadioComponent(props: RadioComponentProps) {
    const { options, onSelect, defaultValue = null } = props
    const [selectedValue, setSelectedValue] = useState<string | null>(defaultValue)

    // 处理单选和取消选中的逻辑
    const handleSelect = (value: string) => {
        // 如果点击已选中的项，则取消选中
        const newValue = selectedValue === value ? null : value
        setSelectedValue(newValue)
        // 通知父组件选中的值变化
        if (onSelect) {
            onSelect(newValue)
        }
    }

    return (
        <Radio.Group
            value={selectedValue}
            onChange={(value) => { handleSelect(String(value)) }}
        >
            <Space direction='horizontal' justify='between' align='center'
                style={{  width: "100%", display: 'flex' }}
            >
                {options.map((item, index) => (
                    <Radio
                        key={index}
                        value={item}
                        onClick={() => { handleSelect(item) }}
                        style={{'--icon-size':'0.8rem','--font-size':'0.6rem'}}
                        icon={checked =>
                            checked ? (
                                <SmileFill style={{ color: '#F54927' }} />
                            ) : (
                                <SmileOutline  style={{ color: 'var(--adm-color-weak)' }} />
                            )
                        }
                    >
                        {item}
                    </Radio>
                ))}
            </Space>
        </Radio.Group>
    )
}